<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				
			width: 300px;
				height: 400px;
				border: 3px solid red;
				animation: laoda 20s  infinite linear;
			}
			@keyframes laoda{
		10%,20%		{
					background-color:gold;
					font-size: 1px;
					width: 500px;
					transform: rotate(0deg);
					
				}
			25%,30%{
					font-size: 10px;
					height: 400px;
					width: 400px;
					background-color: aqua;
				font-size: 100px;
					transform:  translate(200px,300px) rotate(180deg);
					background-image: url(img/th.jfif);
				}
				45%,50%{
					border-radius: 100px;
					background-image: url(img/sa.jfif);
					transform: skew(11deg);
					
				}
				
				80%,100%{
					border-radius: 30px;
					background-image: url(img/e.jfif);
					transform: rotate(360deg);
					height: 500px;
					width: 500px;
				}
			}
			@-webkit-keyframes:
		</style>
		
	</head>
	<body>
		<div class="box">
			24
			
			
			
		</div>
		
		
		
		
		
		
		
		
	</body>
</html>
